<template>
  <div>
    <slot name="d0">
      <div class="box">
        <p class="boxDate">{{ dateYear }}</p>
        <p class="boxDay">{{ dateWeek }}</p>
        <p class="boxTime">{{ dateDay }}</p>
      </div>
    </slot>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  data() {
    return {
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      timer: null,
      nowdata: "",
      nowtime: "",
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      const date = dayjs(new Date());
      this.dateDay = date.format("HH:mm");
      this.dateYear = date.format("YYYY年MM月DD日");
      this.dateWeek = date.format(this.weekday[date.day()]);
      this.nowdata = date.format("YYYY/MM/DD");
      this.nowtime = date.format("HH:mm:ss");
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style scoped>
.box {
  display: flex;
  align-items: center;
}
.boxDay {
  font-size: 14px;
  font-weight: 400;
}
.boxTime {
  font-size: 14px;
  margin: 0 15px;
  font-weight: 400;
}
.boxDate {
  font-size: 14px;
  font-weight: 400;
}
</style>
